<template>
  <div class="app-container">
    <!--查询表单-->
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item>
        <el-input v-model="historyQuery.name" placeholder="教师名"/>
      </el-form-item>
      <el-button type="primary" icon="el-icon-search" @click="getList()">查询</el-button>
      <el-button type="default" @click="resetData()">清空</el-button>
    </el-form>

    <!-- 表格 -->
    <el-table :data="list" style="width: 100%">
      <el-table-column label="序号" width="70" align="center">
        <template slot-scope="scope">
          {{ (page - 1) * limit + scope.$index + 1 }}
        </template>
      </el-table-column>

      <el-table-column label="教师姓名" prop="name" align="center"/>
      <el-table-column label="成果名称" prop="achievementName" align="center"/>
      <el-table-column label="所属分类" prop="subCategory" align="center"/>
      <el-table-column label="审核状态" prop="state" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.state === 0">待审阅</span>
          <span v-if="scope.row.state === 1">未通过</span>
          <span v-if="scope.row.state === 2">通过</span>
        </template>
      </el-table-column>
      <el-table-column label="教师所属学院" prop="college" align="center">
        <template slot-scope="scope">
          <!-- 学院信息展示 -->
          <span v-if="scope.row.college === 1">商学院</span>
          <span v-if="scope.row.college === 2">管理学院</span>
          <span v-if="scope.row.college === 3">外语学院</span>
          <span v-if="scope.row.college === 4">堪萨斯国际学院</span>
          <span v-if="scope.row.college === 5">电信与智能制造学院</span>
          <span v-if="scope.row.college === 6">计算机与软件工程学院</span>
          <span v-if="scope.row.college === 7">艺术设计学院</span>
          <span v-if="scope.row.college === 8">医学院</span>
          <span v-if="scope.row.college === 9">文法学院(语委办)</span>
          <span v-if="scope.row.college === 10">体育学院</span>
          <span v-if="scope.row.college === 11">新闻与传播学院</span>
          <span v-if="scope.row.college === 12">建筑工程学院</span>
          <span v-if="scope.row.college === 13">音乐戏剧学院</span>
          <span v-if="scope.row.college === 14">马克思主义学院</span>
          <span v-if="scope.row.college === 15">国际教育学院</span>
          <span v-if="scope.row.college === 16">教育学院</span>
          <span v-if="scope.row.college === 17">继续教育学院</span>
          <span v-if="scope.row.college === 18">国际语言中心</span>
        </template>
      </el-table-column>
      <el-table-column label="提交时间" prop="subTime" align="center"/>
      <el-table-column label="审阅时间" prop="updateTime" align="center"/>
      <el-table-column label="操作" width="200" align="center">
        <template slot-scope="scope">
          <el-button type="text" size="4px" icon="el-icon-edit" class="edit-button" @click="outReview(scope.row.id)">打回</el-button>
          <el-button type="text" size="4px" icon="el-icon-circle-check" class="disable-button" @click="okReview(scope.row.id)">通过</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination :current-page="page" :page-size="limit" :total="total" style="padding: 30px 0; text-align: center;" layout="total, prev, pager, next, jumper" @current-change="getList"/>
  </div>
</template>

<script>
import * as admin from '@/api/super/admin'
export default {
  data() {
    return {
      list: null,
      page: 1,
      limit: 10,
      total: 0,
      historyQuery: {}
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList(page = 1) {
      this.page = page
      admin.materialReview(this.page, this.limit, this.historyQuery)
        .then(response => {
          // 请求成功处理
          this.list = response.data.rows
          this.total = response.data.total
        })
    },
    resetData() {
      this.historyQuery = {}
      this.getList()
    },
    outReview(id) {
      this.$prompt('请输入打回原因', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputValidator: (value) => {
          return !!value;
        },
        inputErrorMessage: '原因不能为空',
      }).then(({ value }) => {
        admin.outReview(id, value)
          .then(response => {
            // 处理成功响应
            this.$message({
              type: 'success',
              message: '提交成功'
            });
            this.getList()
          })
          .catch(error => {
            // 处理错误响应
            this.$message({
              type: 'error',
              message: '提交失败'
            });
          });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消输入'
        });
      });
    },
    okReview(id) {
      admin.okReview(id).then(response => {
        this.$message({
          type: 'success',
          message: '提交成功'
        });
        this.getList()
      })
    }
  }
}
</script>
